<template>
  <div class="collect">
    <top-header></top-header>
    <div class="collect-box">
      <div class="box-top">
        <h3 v-for="(item, index) in this.$route.meta" :key="index">
          {{ item }}
        </h3>
        <div class="input">
          <input type="text" placeholder="请输入关键字" v-model="inputVal" />
          <button @click="handelser">搜索</button>
        </div>
      </div>
      <div class="box-bottom">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="电影" width="180">
          </el-table-column>
          <el-table-column prop="address" label="用户"> </el-table-column>
          <el-table-column prop="date" label="添加时间"> </el-table-column>
          <el-table-column label="操作事项">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="tableData.length"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader";
export default {
  components: {
    "top-header": TopHeader,
  },
  methods: {
    handleDelete(index, row) {
      this.$axios.delete(`/tableData/${row.id}`).then(() => {
        this.$message({
          type: "success",
          message: "删除成功",
        });
      });
    },
    gettableData() {
      this.$axios.get("/tableData").then((res) => {
        this.tableData = res;
      });
    },
    handelser(){
      let handelsers = this.tableData.filter(
        (item) => item.name.indexOf(this.inputVal) > -1
      );
      return this.tableData = handelsers
    }
    // searchList() {
    //   return this.tableData.filter(
    //     (item) => item.name.indexOf(this.inputVal) > -1
    //   );
    // },
  },
  data() {
    return {
      limit: 5, //每页几行
      tableData: [], //收藏列表
      inputVal: "",
    };
  },
  mounted() {
    this.gettableData();
  },
};
</script>

<style lang="scss">
.collect-box {
  .cell {
    text-align: center;
  }
  width: 1220px;
  height: 500px;
  margin: 10px;
  background-color: white;
  border-top: 5px solid blue;
  .box-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 25px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .input {
      margin-right: 80px;
      border: 1px solid #ccc;
      input{
        width: 120px;
        border: none;
        height: 86%;
        outline: none;
      }
      button{
        border: none;
        height: 100%;
      }
    }
  }
  .el-pagination {
    background: white;
    width: 99.2%;
  }
}
</style>